<template>
  <div class="table-demo-container layout-padding">
    <div class="table-demo-padding layout-padding-view layout-padding-auto">
      <TableSearch  @onOpen="(e)=>{onOperateHandle(e)}" />
      <Table
          ref="tableRef"
          v-bind="state.tableData"
          class="table-demo"
          @operateHandle="onOperateHandle"
          @pageChange="onTablePageChange"
          @sortHeader="onSortHeader"
          @selection-change="onSelectionChange"
      />

    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { AdminBackupApi } from '/@/api/system/backup';

// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/views/system/backup/search.vue'));


// 定义变量内容
const tableRef = ref<RefType>();

const state = reactive({
  tableData: {
    // 列表数据（必传）
    data: [],
    // 表头内容（必传，注意格式）
    header: [
      { key: 'Name', colWidth: '', title: '表名', type: 'text',showType:'text', isCheck: true },
      { key: 'Comment', colWidth: '', title: '表注释', type: 'text',showType:'text', isCheck: true },
      { key: 'Engine', colWidth: '100', title: '引擎', type: 'text',showType:'text', isCheck: true },
      { key: 'Rows', colWidth: '100', title: '数据量', type: 'text',showType:'text',isCheck: true },
      { key: 'DataLength', colWidth: '', title: '数据大小', type: 'text',showType:'text', isCheck: true },
      { key: 'Collation', colWidth: '170', title: '排序规则', type: 'text',showType:'text', isCheck: true },
      { key: 'CreateTime', colWidth: '170', title: '创建时间', type: 'text',showType:'text', isCheck: true },
    ],
    // 配置项（必传）
    config: {
      total: 0, // 列表总数
      loading: false, // loading 加载
      isBorder: false, // 是否显示表格边框
      isSerialNo: false, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      showSummary: false, // 是否显示底部合计行
      operateWidth: 170, // 操作栏宽度
      operateList: [
        {
          input: 'popconfirm',//button:按钮，popconfirm：确认按钮
          name: '备份',//显示的文字
          title: '是否确认备份数据表？',//确认按钮标题
          type: 'danger',//default:黑色,info:灰色,primary:蓝色,success:绿色,warning:黄色,danger:红色
          prop: 'backup',//属性，
          disabled: '',//部分禁用的字段名称
        },
        {
            input: 'popconfirm',//button:按钮，popconfirm：确认按钮
            name: '优化',//显示的文字
            title: '是否确认优化表？',//确认按钮标题
            type: 'primary',//按钮主题类型 default:黑色,info:灰色,primary:蓝色,success:绿色,warning:黄色,danger:红色
            prop: 'optimize',//属性，
            disabled: '',//部分禁用的字段名称
        },
        {
            input: 'popconfirm',//button:按钮，popconfirm：确认按钮
            name: '修复',//显示的文字
            title: '是否确认修复表？',//确认按钮标题
            type: 'success',//按钮主题类型 default:黑色,info:灰色,primary:蓝色,success:绿色,warning:黄色,danger:红色
            prop: 'repair',//属性，
            disabled: '',//部分禁用的字段名称
        }
      ], // 操作栏自定义按钮
    },
    // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
    search: [],
    // 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
    param: {
      pageNum: 1,
      pageSize: 10,
    },
    // 打印标题
    printName: '表格打印',
  },
  selectlist: [],
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.config.loading = true;
	AdminBackupApi().getList(state.tableData.param).then((res:any)=>{
		if(!res.code){
			state.tableData.data = res.data;
		}
	}).catch(err=>{
    // eslint-disable-next-line no-console
		console.log(err);
	});

	setTimeout(() => {
		state.tableData.config.loading = false;
	}, 500);
};

//操作栏按钮点击事件
const onOperateHandle = (type: string, row?: any) => {
  if(type === 'beifen'){
    backup();
  }else if(type==='backup'){
    backup(row);
  }else if(type==='optimize'){
    optimize(row)
  }else if(type==='repair'){
     repair(row)
  }
}

//优化
const optimize = (row:any)=>{
  let loading = ElLoading.service({
    lock: true,
    text: '数据表优化中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  AdminBackupApi()
  .optimize({tables:[row.Name]})
  .then(()=>{

    ElMessage.success(`数据表【${row.Name}】优化成功！`);

  }).catch(err=>{
    // eslint-disable-next-line no-console
    console.log(err);
  }).finally(()=>{
    loading.close()
  });
}

//修复
const repair = (row:any)=>{
  let loading = ElLoading.service({
    lock: true,
    text: '数据表修复中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  AdminBackupApi()
  .repair({tables: [row.Name]})
  .then(()=>{

    ElMessage.success(`数据表【${row.Name}】修复成功！`);

  }).catch(err=>{
    // eslint-disable-next-line no-console
    console.log(err);
  }).finally(()=>{
    loading.close()
  });
}

//备份
const backup = (row:any=null)=>{
  let loading = ElLoading.service({
    lock: true,
    text: '数据备份中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  AdminBackupApi()
  .backup({tables:row?[row.Name]:[]})
  .then(()=>{

    ElMessage.success(row?`数据表【${row.Name}】备份成功！`:`数据库备份成功！`);

  }).catch(err=>{
    // eslint-disable-next-line no-console
    console.log(err);
  }).finally(()=>{
    loading.close()
  });
}

// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum;
  state.tableData.param.pageSize = page.pageSize;
  getTableData();
};
// 表格多选改变时，用于导出
const onSelectionChange = (val: any) => {
	state.selectlist = val;
};
// 拖动显示列排序回调
const onSortHeader = (data: any) => {
  state.tableData.header = data;
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {
  .table-demo-padding {
    padding: 15px;
    .table-demo {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
